<template>
  <view>
    <!-- <u-navbar title="红包列表" :border-bottom="false" :back-text="`累计数量:${sum}`" :back-text-style="{fontSize: '26rpx'}">
      <view slot="right" style="margin-right: 30rpx;" @click="$u.route(`/mine-module/tixian/tixian`)">
        <view style="margin-bottom: 10rpx;">累计数量:{{sum}}</view>
        <u-button type="error" size="mini" :custom-style="customStyle" @click="$u.route(`/mine-module/tixian/tixian`)">申请红包</u-button>
        申请红包
      </view>
    </u-navbar> -->
    
    <u-navbar :border-bottom="false" :is-back="false" title="">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1 u-f">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#000"></u-icon>
          <view class="u-f-ajc u-f-column" style="margin-left: 10rpx;">
            <view style="font-size: 26rpx;">累计数量</view>
            <view style="font-size: 32rpx;">{{sum}}</view>
          </view>
        </view>
        <view class="u-f1 u-f-ajc">红包列表</view>
        <view class="u-f1" style="text-align: right;" @click="$u.route(`/mine-module/tixian/tixian`)">
          申请红包
          <!-- <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button> -->
        </view>
      </view>
    </u-navbar>
    
    <view class="list" v-if="list.length">
      <view class="list_item u-f-ac u-f-jsb" v-for="(item, index) in list" :key="index">
        <view class="item_left">
          <view class="u-f-ac">
            <!-- <view>{{item.member_id}}</view> -->
            <view style="font-size: 34rpx;">数量：{{item.real_amount}}</view>
            <!-- <view style="font-weight: 700;color: #666;margin-left: 20rpx;">{{item.mobile}}</view> -->
          </view>
          <!-- <view v-if="item.alipay" style="margin-bottom: 20rpx;">支付宝账号：{{item.alipay}}</view> -->
          <view class="time">{{item.create_time | unixToDate}}</view>
          <!-- <view style="font-size: 20rpx;color: #999;">{{dayjs(item.addTime).format('YYYY-MM-DD HH:mm:ss')}}</view> -->
        </view>
        <view class="item_right">
          <view class="status" v-if="item.hasOwnProperty('status')">
            {{options.find(o => o.value == item.status).label}}
          </view>
          <view style="margin-top: 20rpx;font-size: 30rpx;">手机号：{{item.mobile}}</view>
        </view>
      </view>
    </view>
    <view v-if="!list.length" style="margin: 300rpx 0 0;">
      <u-empty text="暂无记录~" mode="list"></u-empty>
    </view>
  </view>
</template>

<script>
  import * as API_Haibao from '@/api/haibao.js';
  export default {
    data() {
      return {
        list: [],
        sum: '0.00',
        withdrawalStatus: '',
        params: {
          pageNo: 1,
          pageSize: 10,
          status: '',
          createTime: '',
        },
        customStyle: {
          backgroundColor: '#F4F5F7',
          width: '120rpx',
          height: '50rpx',
          color: '#FF2C2C',
        },
        options: [{
            value: '0',
            label: '待审批',
          },
          {
            value: '1',
            label: '已完成',
          },
          {
            value: '-1',
            label: '已驳回',
          },
        ],
      }
    },
    onLoad() {
      // this.params.pageNo = 1
      // this.list = []
      this.withdrawalList()
    },
    onPullDownRefresh() {
      this.params.pageNo = 1
      this.list = []
      this.withdrawalList()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1500)
    },
    onReachBottom() {
      this.params.pageNo += 1
      this.withdrawalList()
    },
    methods: {
      async withdrawalList() {
        let res = await API_Haibao.getWithdrawalApply(this.params)
        this.sum = res.sum
        this.list.push(...res.withdrawals.data)
      }
    },
  }
</script>

<style lang="scss">
  page {
    background-color: rgba(250, 250, 250, 1);
  }

  .list_item {
    background-color: #fff;
    margin-bottom: 30rpx;
    padding: 40rpx 30rpx;

    .item_left {}

    .item_right {
      text-align: right;
    }

    .status {
      font-size: 36rpx;
      color: red;
    }

    .time {
      font-size: 32rpx;
      color: #999;
      margin-top: 20rpx;
    }
  }
</style>
